<template>
  <div>
    <ul class="all-list">
      <li class="w-full cursor-pointer pl-3" v-for="(item,index) in props.list" :key="item.id">
        <div class="h-[100%]  w-full flex hover:bg-light-800" :class="activeIndex === item.id ? 'bg-light-800' : ''"
          style="line-height: 30px;" @click="changeActiveIndex(item)">
          <div class="expend">
            <span @click="toggle(index) ">{{item?.children?.length ? openArr.includes(index) ? '[-]' :
            '[+]' :
            ''}}</span>
          </div>
          <i class="iconfont icon-file-b-2 mx-1" style="color:#E6A23C;"></i>
          <span>{{item.name}}</span>
        </div>
        <div v-show="openArr.includes(index)" v-if="item.children && item.children.length">
          <abTree :list="item.children" class="item">
          </abTree>
        </div>
      </li>
    </ul>
  </div>
</template>


<script lang="ts">
export default {
  name: "abTree",
};
</script>
<script lang="ts" setup>
import { ref, computed } from 'vue'
import userStore from '@/stores/user'

const Store = userStore()

const props = defineProps({
  list: {
    type: Array<any>,
    default: () => []
  },
})



const openArr = ref<any[]>([0])
const activeIndex = computed(() => Store.activeIndex)

const toggle = (i: number) => {
  // 如果在数组内
  if (openArr.value.includes(i)) {
    const index = openArr.value.indexOf(i)
    openArr.value.splice(index, 1)
  } else {
    openArr.value.push(i)
  }
}

const changeActiveIndex = (item: any) => {
  Store.$patch({
    activeIndex: item.id
  })
}




</script>

<style lang="scss" scoped>
.all-list::before {
  content: "";
  position: absolute;
  width: 1px;
  height: calc(100% - 10px);
  left: 0px;
  top: 10px;
  border-left: 1px dotted #c3c5c8;
}

.item .all-list::before {
  content: "";
  position: absolute;
  width: 1px;
  height: calc(100% - 12px);
  left: 20px;
  top: 0;
  border-left: 1px dotted #c3c5c8;
}


.item ul {
  padding-left: 2em;
}

.expend {
  position: relative;
}

.expend::before {
  content: "";
  position: absolute;
  width: 9px;
  left: -10px;
  top: 15px;
  border-top: 1px dotted #c3c5c8;
}

.item .expend::before {
  content: "";
  position: absolute;
  width: 14px;
  left: -17px;
  top: 17px;
  border-top: 1px dotted #c3c5c8;
}

.item .all-list::before {
  content: "";
  position: absolute;
  width: 1px;
  height: calc(100% - 12px);
  left: 20px;
  top: 0;
  border-left: 1px dotted #c3c5c8;
}
</style>